<!--
Copyright 2020 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Debug</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script type="module" src="/out/Default/resources/inspector_overlay/main.js"></script>
</head>
<body>
  <script type="module">
    const viewportWidth = document.documentElement.clientWidth;
    const viewportHeight = document.documentElement.clientHeight;

    dispatch(["setPlatform", "mac"]);
    dispatch(["setOverlay", "highlight"]);
    dispatch(["reset", {
      viewportSize: {
        width: viewportWidth,
        height: viewportHeight,
      },
      deviceScaleFactor: 1,
      pageScaleFactor: 1,
      pageZoomFactor: 1,
      emulationScaleFactor: 1,
      scrollX: 0,
      scrollY: 0,
    }]);

    let response = {
      "highlight": {
          "paths": [{
              "path": ["M", 758.6666870117188, 490.66668701171875, "L", 1437.3333740234375, 490.66668701171875, "L", 1437.3333740234375, 558, "L", 758.6666870117188, 558, "Z"],
              "fillColor": "rgba(255, 0, 0, 0)",
              "outlineColor": "rgba(128, 0, 0, 0)",
              "name": "content"
          }],
          "flexInfo": [{
              "containerBorder": ["M", 758.6666870117188, 490.66668701171875, "L", 1437.3333740234375, 490.66668701171875, "L", 1437.3333740234375, 558, "L", 758.6666870117188, 558, "Z"],
              "lines": [
                  [{
                      "itemBorder": ["M", 758.6666870117188, 510, "L", 829.3333740234375, 510, "L", 829.3333740234375, 552, "L", 758.6666870117188, 552, "Z"],
                      "baseline": 22.33333396911621
                  }, {
                      "itemBorder": ["M", 829.3333740234375, 517.3333740234375, "L", 878.6666870117188, 517.3333740234375, "L", 878.6666870117188, 549.3333740234375, "L", 829.3333740234375, 549.3333740234375, "Z"],
                      "baseline": 15
                  }, {
                      "itemBorder": ["M", 878.6666870117188, 507.3333435058594, "L", 975.3333740234375, 507.3333435058594, "L", 975.3333740234375, 554, "L", 878.6666870117188, 554, "Z"],
                      "baseline": 25
                  }, {
                      "itemBorder": ["M", 975.3333740234375, 513.3333740234375, "L", 1011.3333740234375, 513.3333740234375, "L", 1011.3333740234375, 550.6666870117188, "L", 975.3333740234375, 550.6666870117188, "Z"],
                      "baseline": 19
                  }, {
                      "itemBorder": ["M", 1011.3333740234375, 490.66668701171875, "L", 1110, 490.66668701171875, "L", 1110, 558, "L", 1011.3333740234375, 558, "Z"],
                      "baseline": 41.66666793823242
                  }]
              ],
              "isHorizontalFlow": true,
              "alignItemsStyle": "baseline",
              "flexContainerHighlightConfig": {
                  "containerBorder": {
                      "color": "rgba(122, 34, 238, 1)",
                      "pattern": "dashed"
                  },
                  "lineSeparator": {
                      "color": "rgba(122, 34, 238, 1)",
                      "pattern": "dashed"
                  },
                  "itemSeparator": {
                      "color": "rgba(122, 34, 238, 1)",
                      "pattern": "dotted"
                  },
                  "mainDistributedSpace": {
                      "fillColor": "rgba(122, 34, 238, 0)",
                      "hatchColor": "rgba(122, 34, 238, 1)"
                  },
                  "crossDistributedSpace": {
                      "fillColor": "rgba(122, 34, 238, 0)",
                      "hatchColor": "rgba(122, 34, 238, 1)"
                  },
                  "rowGapSpace": {
                      "fillColor": "rgba(122, 34, 238, 0)",
                      "hatchColor": "rgba(122, 34, 238, 1)"
                  },
                  "columnGapSpace": {
                      "fillColor": "rgba(122, 34, 238, 0)",
                      "hatchColor": "rgba(122, 34, 238, 1)"
                  },
                  "crossAlignment": {
                      "color": "rgba(122, 34, 238, 1)",
                      "pattern": "solid"
                  }
              }
          }]
      }
  };

    // Massage the data a bit so we can see a nice flex overlay.
    response = response.highlight;
    delete response.elementInfo;
    response.showRulers = false;
    response.showExtensionLines = false;

    dispatch(["drawHighlight", response]);
  </script>
</body>
</html>
